<html>
  <head>
    <title>操作DOM 的API</title>
  </head>
  <body>
    <script>
      // JavaScript DOM Api

            /*
                abp.dom 提供了你可以订阅的事件，以便在动态添加元素到页面(DOM) 和 从页面(DOM)中删除元素时收到通知。

                如果你想初始化新加载的匀速，这尤其有用。

                这通常是在页面初始化后动态添加元素到DOM（例如，通过AJAX获取一些超文本标记语言元素）时需要的。
             */

             /*
                  一、节点事件   Node Events

                          1、添加元素事件   onNodeAdded

                                    将元素添加到DOM时会触发此事件：

                                    eg：

                                          abp.dom.onNodeAdded(function(args){
                                              console.log(args.$el);
                                          });

                                      args对象就有以下字段：

                                          $el: 用于将新元素插入到DOM的 JQuery 选择器。

                          2、删除元素事件   onNodeRemoved 已删除

                                       abp.dom.onNodeRemoved(function(args){
                                            console.log(args.$el);
                                        });

                                       args对象具有以下字段：

                                          $el: 用于从DOM中删除元素的JQuery选择器对象
             */

             /*
                  二、预构建初始化程序   Pre-Build Initializers

                          ABP使用DOM事件来初始化某种超文本标记语言元素，当它们在页面已经初始化之后被添加到DOM时。

                          请注意，如果这些元素已经包含在初始DOM中，则相同的初始化程序也可以工作。
                          
                          因此，无论它们是初始加载还是延迟加载，它们都可以按预期工作。


                         1、Form Initializer 表单初始化程序
                         
                                表单初始化程序（定义为abp.dom.initializers.initializeForms）初始化延迟加载的表单：

                                  自动在表单上启用unobtrusive验证

                                  可以在您提交表单时自动显示确认消息。
                                  要启用此功能，只需在form元素中添加带有消息（如data-confirm="Are you sure?"）的data-confirm属性。

                                  如果form元素具有data-ajaxForm="true"属性，则自动调用form元素上的.abpAjaxForm()，以使表单通过AJAX发布。

                                  有关更多信息，请参阅表单和验证文档。

                          2、Script Initializer 脚本初始化程序

                                  脚本初始化程序（abp.dom.initializers.initializeScript）可以为DOM元素执行JavaScript代码。

                                  eg：  延迟加载组件并在元素加载后执行一些代码

                                        假设您有一个容器来加载里面的元素：

                                              <div id="LazyComponent"></div> 

                                        这是将通过AJAX从服务器加载并插入容器的组件：

                                              <div data-script-class="MyCustomClass">
                                                  <p>Sample message</p>
                                              </div>

                                        data-script-class="MyCustomClass"表示将用于对此元素执行一些逻辑的JavaScript类：

                                        MyCustomClass是一个全局对象，定义如下：

                                                MyCustomClass = function(){

                                                      function initDom($el){
                                                          $el.css('color', 'red');
                                                      }

                                                      return {
                                                          initDom: initDom
                                                      }
                                                };

                                            initDom是ABP调用的函数。$el参数是作为JQuery选择加载的超文本标记语言元素。

                                            最后，您可以在AJAX调用后将组件加载到容器内：

                                                 $(function () {
                                                      setTimeout(function(){
                                                          $.get('/get-my-element').then(function(response){
                                                            $('#LazyComponent').html(response);
                                                          });
                                                      }, 2000);
                                                  }); 

                                            如果您不知道组件将如何以及何时加载到DOM中，脚本初始化系统特别有用。
                                            
                                            如果您已经在库中开发了一个可重用的UI组件，并且您希望应用程序开发人员不应该关心如何在不同的用例中初始化组件，这是可能的。

                                            如果组件在初始DOM中加载，则脚本初始化不起作用。在这种情况下，您负责初始化它。
             */
    </script>
  </body>
</html>